<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="添加一个元素" @click="add">
        <input type="button" value="删除一个元素" @click="remove">
        <ul>
            <li v-for="(str,index) in arr">第{{index}}值是：{{str}}</li>
        </ul>
        <hr>
        <h3 v-for="user in objArr">{{user.name}}的年龄是{{user.age}}</h3>
        <hr>
        <input type="text" v-model="message">
        <h3>{{message}}</h3>
        <button @click="checkMessage">测试</button>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["aaa","bbb","ccc"],
                objArr:[{name:"张三",age:18},{name:"李四",age:18}],
                message:""
            },
            methods:{
                //添加一个元素
                add:function () {
                    this.arr.push("ddd");
                },
                //删除一个元素
                remove:function () {
                    this.arr.shift();
                },
                checkMessage:function (){
                    this.message="你好！"
                }
            }
        })
    </script>
</body>
</html>